@charset 'utf-8';
@import 'header';
@import 'footer';
@import 'rest';
@import 'toCart';

@mixin center{
	margin:{
		left: auto;
		right: auto;
	}
}
@mixin WH{
	width: 100%;
	height: 100%;
}

@mixin flex-1{
	display: flex;
	justify-content: space-between;
}

@mixin flex-column{
	display: flex;
	flex-direction: column;
}

@mixin btn-span{
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid;
	cursor: pointer;
}

	
.fly{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #F0AD4E;
}	

.detail-box{
	width: 85%;
	height: 500px;
	@include center;
	display: flex;
	margin-top: 40px;
	justify-content: space-between;
	// border: 1px solid;
	
	#detail-img{
		width: 45%;
		height: 100%;
		// background-color: orange;
		// border: 1px solid;
		#FDJ{
			width: 400px;
			height: 400px;
			margin-left: 100px;
			// background-color: darkgoldenrod;
			// border: 1px solid red;
		}
		#exzoom{
			width: 100%;
			height: 100%;
		}
	};
	
	#detail-txt{
		width: 45%;
		div{
			// margin-top: 30px;
		}
		
		.txt-1{
			h4{
				color: #999999;
			}
		};
		.red{
			color: red;
		}
		.txt-2{
			width: 80%;
			height: 68px;
			overflow:hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-line-clamp:3;
			-webkit-box-orient:vertical;
			// border: 1px solid;
			// line-height: 30px;
			font-size: 16px;
		};
		
		.mini-img{
			width: 80px;
			height: 80px;
			margin-top: 20px;
			border: 1px solid;
			img{
				@include WH;
			}
		};
		
		.mini-logo{
			width: 80px;
			height: 30px;
			margin-top:10px;
			@include flex-1;
			// border: 1px solid;
			a{
				width: 30px;
				height: 30px;
				img{
					@include WH;
				}
			}
		};
		
		.btn-box{
			width: 70%;
			@include flex-column;
			input{
				width: 100%;
				height: 30px;
				margin-top: 10px;
				text-align: center;
				line-height: 100%;
				// margin-bottom: 20px;
				outline: none;
			}
			#btn-to-cart{
				background-color: black;
				color: white;
				border: none;
			}
			#btn-buy{
				background-color: white;
			}
			#return-info{
				margin-top: 10px;
				font-size: 12px;
				color: #999999;
			}
		}
		
	}
};

.like-more{
	width: 85%;
	height: 500px;
	margin: 60px 0px;
	// border: 1px solid #dcdcdc;
	@include center;
	h3{
		text-align: center;
		margin: 30px 0px;
		span{
			@include btn-span;
		}
		.gray{
			color: #dcdcdc;
			border: none;
		}
	}
	ul{
		width: 100%;
		height: 400px;
		// overflow-y: auto;
		@include flex-1;
		li{
			width: 24%;
			height: 100%;
			float:left;
			// border: 1px solid;
			background-color: tan;
			// background-color: fuchsia;
			position: relative;
			img{
				@include WH;
			};
			.mini-info{
				width: 100%;
				height: 50px;
				text-align: center;
				position:absolute;
				left:0;
				top:85%;
				p{
					margin: 0;
				}
			}
		}
	};
	
	
}


